{% extends 'layouts/base.html' %}
{% load static %}

{% block content %}

  <div class="py-4">
    <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
      <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
        <li class="breadcrumb-item">
          <a href="#">
            <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
              </path>
            </svg>
          </a>
        </li>
        <li class="breadcrumb-item"><a href="#">Tables</a></li>
        <li class="breadcrumb-item active" aria-current="page">Bootstrap tables</li>
      </ol>
    </nav>
    <div class="d-flex justify-content-between w-100 flex-wrap">
      <div class="mb-3 mb-lg-0">
        <h1 class="h4">Bootstrap tables</h1>
        <p class="mb-0">Dozens of reusable components built to provide buttons, alerts, popovers, and more.</p>
      </div>
      <div>
        <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/components/tables/"
          class="btn btn-outline-gray-600 d-inline-flex align-items-center">
          <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd"
              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
              clip-rule="evenodd"></path>
          </svg>
          Bootstrap Tables Docs
        </a>
      </div>
    </div>
  </div>

  <div class="card border-0 shadow mb-4">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-centered table-nowrap mb-0 rounded">
          <thead class="thead-light">
            <tr>
              <th class="border-0 rounded-start">#</th>
              <th class="border-0">Traffic Source</th>
              <th class="border-0">Source Type</th>
              <th class="border-0">Category</th>
              <th class="border-0">Global Rank</th>
              <th class="border-0">Traffic Share</th>
              <th class="border-0 rounded-end">Change</th>
            </tr>
          </thead>
          <tbody>
            <!-- Item -->
            <tr>
              <td><a href="#" class="text-primary fw-bold">1</a> </td>
              <td class="fw-bold d-flex align-items-center">
                <svg class="icon icon-xxs text-gray-500 me-2" fill="currentColor" viewBox="0 0 20 20"
                  xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd"
                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z"
                    clip-rule="evenodd"></path>
                </svg>
                Direct
              </td>
              <td>
                Direct
              </td>
              <td>
                -
              </td>
              <td>
                --
              </td>
              <td>
                <div class="row d-flex align-items-center">
                  <div class="col-12 col-xl-2 px-0">
                    <div class="small fw-bold">51%</div>
                  </div>
                  <div class="col-12 col-xl-10 px-0 px-xl-1">
                    <div class="progress progress-lg mb-0">
                      <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="51" aria-valuemin="0"
                        aria-valuemax="100" style="width: 51%;"></div>
                    </div>
                  </div>
                </div>
              </td>
              <td class="text-success">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">2.45%</span>
                </div>
              </td>
            </tr>
            <!-- End of Item -->

            <!-- Item -->
            <tr>
              <td><a href="#" class="text-primary fw-bold">2</a> </td>
              <td class="fw-bold d-flex align-items-center">
                <svg class="icon icon-xxs text-gray-500 me-2" aria-hidden="true" focusable="false" data-prefix="fab"
                  data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
                  <path fill="currentColor"
                    d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z">
                  </path>
                </svg>
                Google Search
              </td>
              <td>
                Search / Organic
              </td>
              <td>
                -
              </td>
              <td>
                --
              </td>
              <td>
                <div class="row d-flex align-items-center">
                  <div class="col-12 col-xl-2 px-0">
                    <div class="small fw-bold">18%</div>
                  </div>
                  <div class="col-12 col-xl-10 px-0 px-xl-1">
                    <div class="progress progress-lg mb-0">
                      <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="18" aria-valuemin="0"
                        aria-valuemax="100" style="width: 18%;"></div>
                    </div>
                  </div>
                </div>
              </td>
              <td class="text-success">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">17.78%</span>
                </div>
              </td>
            </tr>
            <!-- End of Item -->

            <!-- Item -->
            <tr>
              <td><a href="#" class="text-primary fw-bold">3</a> </td>
              <td class="fw-bold d-flex align-items-center">
                <svg class="icon icon-xxs text-gray-500 me-2" aria-hidden="true" focusable="false" data-prefix="fab"
                  data-icon="youtube" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                  <path fill="currentColor"
                    d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
                  </path>
                </svg>
                youtube.com
              </td>
              <td>
                Social
              </td>
              <td>
                <a class="small fw-bold" href="#">Arts and Entertainment</a>
              </td>
              <td>
                #2
              </td>
              <td>
                <div class="row d-flex align-items-center">
                  <div class="col-12 col-xl-2 px-0">
                    <div class="small fw-bold">18%</div>
                  </div>
                  <div class="col-12 col-xl-10 px-0 px-xl-1">
                    <div class="progress progress-lg mb-0">
                      <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="18" aria-valuemin="0"
                        aria-valuemax="100" style="width: 18%;"></div>
                    </div>
                  </div>
                </div>
              </td>
              <td>
                -
              </td>
            </tr>
            <!-- End of Item -->

            <!-- Item -->
            <tr>
              <td><a href="#" class="text-primary fw-bold">4</a> </td>
              <td class="fw-bold d-flex align-items-center">
                <svg class="icon icon-xxs text-gray-500 me-2" aria-hidden="true" focusable="false" data-prefix="fab"
                  data-icon="yahoo" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                  <path fill="currentColor"
                    d="M223.69,141.06,167,284.23,111,141.06H14.93L120.76,390.19,82.19,480h94.17L317.27,141.06Zm105.4,135.79a58.22,58.22,0,1,0,58.22,58.22A58.22,58.22,0,0,0,329.09,276.85ZM394.65,32l-93,223.47H406.44L499.07,32Z">
                  </path>
                </svg>
                yahoo.com
              </td>
              <td>
                Referral
              </td>
              <td>
                <a class="small fw-bold" href="#">News and Media</a>
              </td>
              <td>
                #11
              </td>
              <td>
                <div class="row d-flex align-items-center">
                  <div class="col-12 col-xl-2 px-0">
                    <div class="small fw-bold">8%</div>
                  </div>
                  <div class="col-12 col-xl-10 px-0 px-xl-1">
                    <div class="progress progress-lg mb-0">
                      <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="8" aria-valuemin="0"
                        aria-valuemax="100" style="width: 8%;"></div>
                    </div>
                  </div>
                </div>
              </td>
              <td class="text-danger">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">9.45%</span>
                </div>
              </td>
            </tr>
            <!-- End of Item -->

            <!-- Item -->
            <tr>
              <td><a href="#" class="text-primary fw-bold">5</a> </td>
              <td class="fw-bold d-flex align-items-center">
                <svg class="icon icon-xxs text-gray-500 me-2" aria-hidden="true" focusable="false" data-prefix="fab"
                  data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                  <path fill="currentColor"
                    d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z">
                  </path>
                </svg>
                twitter.com
              </td>
              <td>
                Social
              </td>
              <td>
                <a class="small fw-bold" href="#">Social Networks</a>
              </td>
              <td>
                #4
              </td>
              <td>
                <div class="row d-flex align-items-center">
                  <div class="col-12 col-xl-2 px-0">
                    <div class="small fw-bold">4%</div>
                  </div>
                  <div class="col-12 col-xl-10 px-0 px-xl-1">
                    <div class="progress progress-lg mb-0">
                      <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="4" aria-valuemin="0"
                        aria-valuemax="100" style="width: 4%;"></div>
                    </div>
                  </div>
                </div>
              </td>
              <td>
                -
              </td>
            </tr>
            <!-- End of Item -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="card border-0 shadow">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-centered table-nowrap mb-0 rounded">
          <thead class="thead-light">
            <tr>
              <th class="border-0 rounded-start">Country</th>
              <th class="border-0">All</th>
              <th class="border-0">All Change</th>
              <th class="border-0">Travel & Local</th>
              <th class="border-0">Travel & Local Change</th>
              <th class="border-0">Widgets</th>
              <th class="border-0 rounded-end">Widgets Change</th>
            </tr>
          </thead>
          <tbody>
            <!-- Item -->
            <tr>
              <td class="border-0">
                <a href="#" class="d-flex align-items-center">
                  <img class="me-2 image image-small rounded-circle" alt="Image placeholder"
                    src="{% static 'assets/img/flags/united-states-of-america.svg' %}">
                  <div><span class="h6">United States</span></div>
                </a>
              </td>
              <td class="border-0 fw-bold">106</td>
              <td class="border-0 text-danger">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">5</span>
                </div>
              </td>
              <td class="border-0 fw-bold">
                3
              </td>
              <td class="border-0">
                =
              </td>
              <td class="border-0 fw-bold">
                32
              </td>
              <td class="border-0 text-success">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">3</span>
                </div>
              </td>
            </tr>
            <!-- End of Item -->

            <!-- Item -->
            <tr>
              <td class="border-0">
                <a href="#" class="d-flex align-items-center">
                  <img class="me-2 image image-small rounded-circle" alt="Image placeholder"
                    src="{% static 'assets/img/flags/canada.svg' %}">
                  <div><span class="h6">Canada</span></div>
                </a>
              </td>
              <td class="border-0 fw-bold">76</td>
              <td class="border-0 text-success">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">17</span>
                </div>
              </td>
              <td class="border-0 fw-bold">
                4
              </td>
              <td class="border-0">
                =
              </td>
              <td class="border-0 fw-bold">
                30
              </td>
              <td class="border-0 text-success">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">3</span>
                </div>
              </td>
            </tr>
            <!-- End of Item -->

            <!-- Item -->
            <tr>
              <td class="border-0">
                <a href="#" class="d-flex align-items-center">
                  <img class="me-2 image image-small rounded-circle" alt="Image placeholder"
                    src="{% static 'assets/img/flags/united-kingdom.svg' %}">
                  <div><span class="h6">United Kingdom</span></div>
                </a>
              </td>
              <td class="border-0 fw-bold">147</td>
              <td class="border-0 text-success">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">10</span>
                </div>
              </td>
              <td class="border-0 fw-bold">
                5
              </td>
              <td class="border-0">
                =
              </td>
              <td class="border-0 fw-bold">
                34
              </td>
              <td class="border-0 text-success">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">7</span>
                </div>
              </td>
            </tr>
            <!-- End of Item -->

            <!-- Item -->
            <tr>
              <td class="border-0">
                <a href="#" class="d-flex align-items-center">
                  <img class="me-2 image image-small rounded-circle" alt="Image placeholder"
                    src="{% static 'assets/img/flags/france.svg' %}">
                  <div><span class="h6">France</span></div>
                </a>
              </td>
              <td class="border-0 fw-bold">112</td>
              <td class="border-0 text-success">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">3</span>
                </div>
              </td>
              <td class="border-0 fw-bold">
                5
              </td>
              <td class="border-0 text-success">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">1</span>
                </div>
              </td>
              <td class="border-0 fw-bold">
                34
              </td>
              <td class="border-0 text-danger">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">2</span>
                </div>
              </td>
            </tr>
            <!-- End of Item -->

            <!-- Item -->
            <tr>
              <td class="border-0">
                <a href="#" class="d-flex align-items-center">
                  <img class="me-2 image image-small rounded-circle" alt="Image placeholder"
                    src="{% static 'assets/img/flags/japan.svg' %}">
                  <div><span class="h6">Japan</span></div>
                </a>
              </td>
              <td class="border-0 fw-bold">115</td>
              <td class="border-0 text-danger">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">12</span>
                </div>
              </td>
              <td class="border-0 fw-bold">
                6
              </td>
              <td class="border-0 text-danger">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">1</span>
                </div>
              </td>
              <td class="border-0 fw-bold">
                37
              </td>
              <td class="border-0 text-danger">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">5</span>
                </div>
              </td>
            </tr>
            <!-- End of Item -->

            <!-- Item -->
            <tr>
              <td class="border-0">
                <a href="#" class="d-flex align-items-center">
                  <img class="me-2 image image-small rounded-circle" alt="Image placeholder"
                    src="{% static 'assets/img/flags/germany.svg' %}">
                  <div><span class="h6">Germany</span></div>
                </a>
              </td>
              <td class="border-0 fw-bold">220</td>
              <td class="border-0 text-danger">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">56</span>
                </div>
              </td>
              <td class="border-0 fw-bold">
                7
              </td>
              <td class="border-0 text-danger">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">3</span>
                </div>
              </td>
              <td class="border-0 fw-bold">
                30
              </td>
              <td class="border-0 text-success">
                <div class="d-flex align-items-center">
                  <svg class="icon icon-xs me-1" fill="currentColor" viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd"
                      d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
                      clip-rule="evenodd"></path>
                  </svg>
                  <span class="fw-bold">2</span>
                </div>
              </td>
            </tr>
            <!-- End of Item -->
          </tbody>
        </table>
      </div>
    </div>
  </div>

{% endblock content %}